<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../Cesium/Build/Cesium/Widgets/widgets.css">
    <link rel="stylesheet" href="../../plugin/vide7.4.1/css/video-js.min.css">
    <script src="../../Cesium/Build/Cesium/Cesium.js"></script>
    <script src="../../plugin/vide7.4.1/js/video.min.js"></script>
    <script src="../../JS/cesiumvideo.js"></script>

    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <script src="../../layui/layui.js" charset="utf-8"></script>
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .videopanel {
            position: absolute;
            width: 400px;
            height: 400px;
            left: 5px;
            top: 5px;
            background-color: rgb(37, 23, 23, 0.5);
            z-index: 999;
        }

        .videopanel table {
            border-collapse: collapse;
            width: 100%;

        }

        .videopanel table tr {
            border-collapse: collapse;
            width: 100%;
            border: 1px solid rgb(112, 109, 109, 0.5);
            height: 44px;
            color: white;
        }

        .videopanel table tr td:first {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="videopanel">
        <table>
            <tr>
                <td>调整透明度</td>
                <td>
                    <div id="alpha" class="demo-slider"></div>
                </td>
            </tr>
            <tr>
                <td>水平拉伸</td>
                <td>
                    <div id="shuipingls" class="demo-slider"></div>
                </td>
            </tr>
            <tr>
                <td>相机宽高比例</td>
                <td>
                    <div id="kuangaobili" class="demo-slider"></div>
                </td>
            </tr>
            <tr>
                <td>
                    <button type="button" class="layui-btn layui-btn-warm">播放</button></td>
                <td>

                    <button type="button" class="layui-btn layui-btn-warm">暂停</button>
                </td>
            </tr>
        </table>
    </div>
    <!-- <video id="video" class="video-js vjs-default-skin" style="display: none;" controls autoplay="autoplay" width="640"
        height="320" data-setup='{}'>
        <source src="http://192.168.146.131:8000/hls/test.m3u8" type="application/x-mpegURL" />
        <source src="../../plugin/vide7.4.1/oceans.mp4"> 
        <source src="">
    </video> -->
    <div id="cesiumContainer">

    </div>
</body>
<script>
    var viewer = new Cesium.Viewer('cesiumContainer', {
        //需要进行可视化的数据源的集合
        animation: false, //是否显示动画控件
        shouldAnimate: true,
        homeButton: false, //是否显示Home按钮
        fullscreenButton: false, //是否显示全屏按钮
        baseLayerPicker: false, //是否显示图层选择控件
        geocoder: false, //是否显示地名查找控件
        timeline: false, //是否显示时间线控件
        sceneModePicker: true, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: false, //是否显示点击要素之后显示的信息
        requestRenderMode: true, //启用请求渲染模式
        scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
        sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
        fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
        //天地图是官方开元的地图，不需要密钥
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
            url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
        })
    });

    // var vid = document.getElementById("video");
    var vid = cesiumvideo.getEl();
    var polygon = viewer.entities.add({
        polygon: {
            hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([
                116.3905818638, 39.9073400924,
                116.3918829375, 39.9073236682,
                116.3916863213, 39.9065994805,
                116.3907149650, 39.9065800227
            ])),
            material: vid,
            classificationType: Cesium.ClassificationType.BOTH
        }
    });
    viewer.flyTo(polygon);
    vid.play();

    layui.use(['layer', 'form', 'slider'], function () {
        var layer = layui.layer
            , form = layui.form, slider = layui.slider;;

        //自定义颜色
        slider.render({
            elem: '#alpha'
            , theme: '#1E9FFF', //主题色
            change: function (value) {
                console.log(value) //动态获取滑块数值
                //do something
            }
        });

        slider.render({
            elem: '#shuipingls'
            , theme: '#1E9FFF', //主题色
            change: function (value) {
                console.log(value) //动态获取滑块数值
                //do something
            }
        });

        slider.render({
            elem: '#kuangaobili'
            , theme: '#1E9FFF', //主题色
            change: function (value) {
                console.log(value) //动态获取滑块数值
                //do something
            }
        });

    });

</script>

</html>